<template>
    <view>
        <view class="cu-modal bottom-modal" :class="modalNameDetail=='bottomModal'?'show':''" @tap="hideModal">
            <view class="cu-dialog" @tap.stop="">
                <!--<view class="cu-bar bg-white">
                    <view class="action text-green" @tap="confirm">确定</view>
                    <view class="action text-blue" @tap="hideModal">取消</view>
                </view>-->
                <view class="container">
                    <scroll-view class="scroll-region" scroll-y>
                        <!-- 展示caiLiaoData的数据，以卡片的形式展示，每个卡片的左侧的第一项是一个复选框按钮 -->
                        <!--<view class="cu-list menu-avatar"></view>-->
                        
                                <!-- <view class="cu-avatar round lg" :style="[{backgroundImage:'url('+item.caiLiaoGuiGe+')'}]"></view> -->
                                <!-- checked="true" -->
                                <!-- {{ applyFile }} -->
                                <!-- <view class="cu-card"  v-if="item.type.endsWith('jpg') || item.type.endsWith('png') || item.type.endsWith('jpeg')" >

                                </view> -->
                                <view class="cu-card" v-for="(item,index) in applyFile" :key="index">
                                    <view class="cu-item" >
                                        <view class="flex justify-between padding-sm">
                                            <view class="flex flex-sub align-center">
                                                <image src="/static/image/zfgs/img.png" v-if="item.url.endsWith('jpg') || item.url.endsWith('png') || item.url.endsWith('jpeg')" class="cuIcon-image"></image>
                                                <image src="/static/image/zfgs/PDF.png" class="cuIcon-image" v-else></image>
                                                <view> {{ item.name }}</view>
                                            </view>
                                            
                                            <view v-if="item.url.endsWith('jpg') || item.url.endsWith('png') || item.url.endsWith('jpeg')"><button class="cu-btn round bg-yellow shadow" @click="ViewImage(item.url,applyFile,$event)">查看</button> </view>
                                            <view v-else><button class="cu-btn round bg-yellow shadow" @click="downloadAndOpenFile(item.url)">下载</button> </view>
                                        </view>
                                    </view>
                                </view>
                    </scroll-view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    // import plus from 'uni-js-sdk'
    export default {
		props: {
			modalNameDetail:{
				type: String,
				default: 'bottomModal'
			},
            applyFile:{
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data() {
            return {
                // modalName:'bottomModal',
				imgList:[],
				date: '2018-12-25',
                modalName:null,
                caiLiaoData:[{
                    caiLiaoName:'铜双外丝直接',
                    caiLiaoCode:'010300314',
                    caiLiaoGuiGe:'15'
                },{
                    caiLiaoName:'不锈钢闸阀',
                    caiLiaoCode:'010500394',
                    caiLiaoGuiGe:'DN15 PN10'
                },{
                    caiLiaoName:'钢塑补芯',
                    caiLiaoCode:'010300396',
                    caiLiaoGuiGe:'D40＞15'
                }],
                checkbox: [{
                    value: 'A',
                    checked: true
                }, {
                    value: 'B',
                    checked: true
                }, {
                    value: 'C',
                    checked: false
                }],
            }
        },
        created() {
            console.log(this.modalNameDetail,'modalNameDetail')
        },
        methods: {
            showModal() {
                // this.modalName = 'bottomModal'
				this.$emit('modalNameDetailEmit', 'bottomModal')
            },
            hideModal() {
                // this.modalName = null
				this.$emit('modalNameDetailEmit', null)
            },
			ViewImage(url,applyFile,e) {
                console.log(applyFile,'this.applyFile')

                uni.previewImage({
                    urls: applyFile,
                    current: url,
                    fail: (err) => {
                        console.log(err,'预览失败')
                        uni.showToast({
                            title: '预览失败',
                            icon: 'none'
                        });
                    },
                    success: (res) => {
                        console.log(res,'预览成功')
                    }
                });
            },
			DelImg(e) {
				uni.showModal({
                    title: '',
                    content: '确定要删除吗？',
                    cancelText: '取消',
                    confirmText: '确认',
                    success: res => {
                        if (res.confirm) {
                            this.imgList.splice(e.currentTarget.dataset.index, 1)
                        }
                    }
                })
            },
			ChooseImage() {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album"], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths);
							this.$u.toast("上传成功");
						} else {
							this.imgList = res.tempFilePaths;
						}
					}
				});

			},
			DateChange(e) {
				this.date = e.detail.value
			},
			confirm(){
				this.$u.toast("确认成功");
				// this.modalName = null
				this.$emit("modalNameDetailEmit",null);
			},
            textareaAInput(e){

            },
            
            async downloadAndOpenFile(serverUrl) {
                console.log(serverUrl,'serverUrl');
                uni.downloadFile({
                    url: serverUrl, 
                    success: function (res) {
                        
                        var filePath = res.tempFilePath;
                        console.log(filePath,res);
                        uni.openDocument({
                        filePath: filePath,
                        showMenu: true,
                        success: function (res) {
                            console.log('打开文档成功');
                        }
                        });
                    },
                    fail: function (err) {
                        console.log(err);
                    }
                });

            },



		}
    }

</script>
<style scoped lang="scss">
.cu-modal{
	z-index: 998;
    text-align: left;
}
.container{
    display: flex;
    flex-direction: column;
}
.scroll-region {
  width: 100%;
  min-height: 200px; /* 设置滚动区域的高度 */
  overflow-y: auto; /* 仅允许垂直滚动，也可用scroll-y代替 */
}
.cu-avatar{
    background: #fff;
}

.cuIcon-image{
    width: 40px;
    height: 40px;
}
</style>
